<template>
  <div class="details" ref="details" :class="{ a: show1 }">
    <div v-if="show1" class="mask">
      <el-button @click="show" :style="dynamicStyle"
        >更多 <i class="el-icon-arrow-down"></i
      ></el-button>
    </div>
    <div class="stats">
    <span v-for="(item,index) in stats" :key="index" class="stast_name">{{ item.attrName }}：
      <span v-for="(value,index) in item.attrVals" :key="index">
      <span v-if="item.checkeds[index]">
        {{ value }}
      </span>
      </span>
    </span>
    </div>
    <div class="detailPics" v-if="goods.detailPics.length<=0"> <img :src="img" /></div>
    <div class="detailPics" v-else> <img :src="item" v-for="(item,index) in goods.detailPics" :key="index" /></div>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  data() {
    return {
      img: require('@/assets/images/2.png'),
      detailsHeight: 0,
      show1: true,
      topValue: 0,
      goods:'',
      stats:[],
      
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.detailsHeight = this.$refs.details.clientHeight
      this.topValue = -(this.detailsHeight - 450)
    })
  },
  methods: {
    show() {
      this.show1 = !this.show1
    },
  },
  computed: {
    dynamicStyle() {
      const top = this.topValue + 'px'
      return {
        top: top,
      }
    },
  },
  watch: {
  goods: {
    immediate: true, // 立即执行回调函数
    handler(newVal) {
      if(newVal!==''){
        const g= _.cloneDeep(newVal)
        
        if(g.manyAttrs.length>0){
          g.manyAttrs.forEach(item => {
        let t={
          attrName:item.attrName,
          attrVals:item.attrVals,
          checkeds:item.checkeds
        }
        this.stats.push(t)
      })
        }
     if(g.onlyAttrs.length>0){
      g.onlyAttrs.forEach(item => {
        let t={
          attrName:item.attrName,
          attrVals:item.attrVals?item.attrVals.split():[],
          checkeds:item.checkeds?item.checkeds.split():[]
        }
        this.stats.push(t)
      })
     }
      }  
    }
  }
}
 
}
</script>

<style scoped lang="less">
.details {
  width: 1170px;
  background-color: white;
  margin-left: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.a {
  height: 320px;
  overflow: hidden;
}
.details .stats .stast_name {
  width: 270px;
  height: 20px;
  display: block;
  float: left;
  margin-top: 10px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
margin-left: 20px;
}
.details div {
  text-align: center;
}
.mask{
  position: absolute;
  top: 170px;
  left: 550px;
}
.details div .el-button {
  width: 120px;
  position: relative;
  left: -10%;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 999;
}
.detailPics{
  position: relative;
  clear: both;
}
</style>
